<template>
  <div class="product-management-container">
    <!-- 搜索栏：商品名称 + 分类 + 上架时间筛选 -->
    <div class="search-bar">
      <input
        type="text"
        v-model="searchQuery"
        placeholder="输入商品名称关键词"
        @keyup.enter="fetchProductData"
      />

      <!-- 搜索用三级分类联动 -->
      <select
        v-model="searchCategory1Id"
        @change="handleSearchLevel1Change"
        class="category-select"
      >
        <option value="">一级分类</option>
        <option v-for="cat in searchLevel1Cats" :key="cat.id" :value="cat.id">
          {{ cat.name }}
        </option>
      </select>
      <select
        v-model="searchCategory2Id"
        @change="handleSearchLevel2Change"
        class="category-select"
        :disabled="!searchCategory1Id"
      >
        <option value="">二级分类</option>
        <option v-for="cat in searchLevel2Cats" :key="cat.id" :value="cat.id">
          {{ cat.name }}
        </option>
      </select>
      <select
        v-model="searchCategory3Id"
        class="category-select"
        :disabled="!searchCategory2Id"
      >
        <option value="">三级分类</option>
        <option v-for="cat in searchLevel3Cats" :key="cat.id" :value="cat.id">
          {{ cat.name }}
        </option>
      </select>

      <span>上架时间</span>
      <input
        type="date"
        v-model="startTime"
        class="date-input"
        @change="validateTimeRange"
      />
      -
      <input
        type="date"
        v-model="endTime"
        class="date-input"
        @change="validateTimeRange"
      />
      <span v-if="timeError" class="time-error">{{ timeError }}</span>
      <button class="search-btn" @click="fetchProductData">
        <i class="icon-search"></i> 搜索
      </button>
      <button
        class="reset-btn"
        @click="resetSearch"
        v-show="hasSearchCondition"
      >
        重置
      </button>
    </div>

    <!-- 加载状态 -->
    <div class="loading-state" v-if="isLoading">
      <p>加载中...</p>
    </div>

    <!-- 商品表格 -->
    <div class="product-table-container" v-else>
      <div class="table-header">
        <div class="table-cell title-column">商品名称</div>
        <div class="table-cell img-column">商品图片</div>
        <div class="table-cell stock-column">库存</div>
        <div class="table-cell price-column">价格</div>
        <div class="table-cell action-column">操作</div>
      </div>

      <div class="table-body">
        <div class="empty-state" v-if="productList.length === 0">
          <p>
            {{ hasSearchCondition ? "没有找到匹配的商品" : "暂无商品数据" }}
          </p>
        </div>

        <div class="table-row" v-for="item in productList" :key="item.id">
          <div class="table-cell title-column">
            <p href="" v-html="item.productName"></p>
          </div>
          <div class="table-cell img-column">
            <img
              :src="`http://117.72.153.227/image/${item.fileName || ''}`"
              alt="商品图片"
              class="product-img"
            />
          </div>
          <div class="table-cell stock-column">{{ item.stock || 0 }}</div>
          <div class="table-cell price-column">
            ¥{{ (item.price || 0).toFixed(2) }}
          </div>
          <div class="table-cell action-column">
            <button class="update-btn" @click="handleUpdate(item.id)">
              修改</button
            >|
            <button
              class="delete-btn"
              @click="handleDelete(item.id)"
              :disabled="isDeleting"
            >
              <i class="icon-delete"></i> 删除
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页控件 -->
    <div
      class="pagination-container"
      v-if="productList.length > 0 && !isLoading"
    >
      <button
        class="page-btn"
        :disabled="currentPage === 1 || isLoading"
        @click="goToFirstPage"
      >
        首页
      </button>
      <button
        class="page-btn"
        :disabled="currentPage === 1 || isLoading"
        @click="goToPrevPage"
      >
        上一页
      </button>
      <span class="page-info"
        >第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span
      >
      <button
        class="page-btn"
        :disabled="currentPage === totalPages || isLoading"
        @click="goToNextPage"
      >
        下一页
      </button>
      <button
        class="page-btn"
        :disabled="currentPage === totalPages || isLoading"
        @click="goToLastPage"
      >
        末页
      </button>
      <select
        v-model="pageSize"
        @change="handlePageSizeChange"
        class="page-size-select"
        :disabled="isLoading"
      >
        <option value="10">每页10条</option>
        <option value="20">每页20条</option>
        <option value="30">每页30条</option>
      </select>
    </div>

    <!-- 商品修改弹窗 -->
    <div class="modal-overlay" v-if="showEditModal">
      <div class="edit-modal">
        <div class="modal-header">
          <h3>修改商品信息</h3>
          <button class="close-btn" @click="closeEditModal">&times;</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="submitEditForm">
            <div class="form-group">
              <label for="edit-name"
                >商品名称 <span class="required">*</span></label
              >
              <input
                type="text"
                id="edit-name"
                v-model="currentProduct.productName"
                placeholder="请输入商品名称"
              />
            </div>

            <div class="form-group category-group">
              <label>商品分类 <span class="required">*</span></label>
              <div class="category-selectors">
                <select
                  v-model="currentProduct.categoryLevel1Id"
                  @change="handleLevel1Change"
                >
                  <option value="">请选择一级分类</option>
                  <option
                    v-for="level1 in level1Categories"
                    :key="level1.id"
                    :value="level1.id"
                  >
                    {{ level1.name }}
                  </option>
                </select>
                <select
                  v-model="currentProduct.categoryLevel2Id"
                  @change="handleLevel2Change"
                  :disabled="!currentProduct.categoryLevel1Id"
                >
                  <option value="">请选择二级分类</option>
                  <option
                    v-for="level2 in level2Categories"
                    :key="level2.id"
                    :value="level2.id"
                  >
                    {{ level2.name }}
                  </option>
                </select>
                <select
                  v-model="currentProduct.categoryLevel3Id"
                  :disabled="!currentProduct.categoryLevel2Id"
                >
                  <option value="">请选择三级分类</option>
                  <template v-if="level3Categories.length > 0">
                    <option
                      v-for="level3 in level3Categories"
                      :key="level3.id"
                      :value="level3.id"
                    >
                      {{ level3.name }}
                    </option>
                  </template>
                </select>
              </div>
            </div>

            <div class="form-group">
              <label for="edit-price"
                >商品价格（元） <span class="required">*</span></label
              >
              <input
                type="number"
                id="edit-price"
                v-model.number="currentProduct.price"
                min="0"
                step="0.01"
                placeholder="请输入商品价格（最多两位小数）"
                @change="validatePrice"
              />
              <span v-if="priceError" class="error-message">{{
                priceError
              }}</span>
            </div>

            <div class="form-group">
              <label for="edit-stock"
                >库存数量 <span class="required">*</span></label
              >
              <input
                type="number"
                id="edit-stock"
                v-model.number="currentProduct.stock"
                min="0"
                placeholder="请输入库存数量"
                @blur="validateStock"
              />
            </div>

            <div class="form-group">
              <label>商品图片</label>
              <div class="img-upload-container">
                <div class="img-preview">
                  <img
                    :src="
                      picUrl ||
                      `http://117.72.153.227/image/${
                        currentProduct.fileName || ''
                      }`
                    "
                    alt="商品图片预览"
                    class="preview-img"
                  />
                  <div
                    v-if="!picUrl && !currentProduct.fileName"
                    class="no-img-placeholder"
                  >
                    暂无图片
                  </div>
                </div>
                <div class="upload-control">
                  <input
                    type="file"
                    id="edit-file"
                    accept="image/*"
                    @change="handleFileChange"
                    hidden
                  />
                  <label for="edit-file" class="upload-btn">选择新图片</label>
                  <p class="tip">支持 JPG、PNG 格式，建议尺寸 200x200px</p>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label for="edit-desc"
                >商品描述 <span class="required">*</span></label
              >
              <textarea
                id="edit-desc"
                v-model="currentProduct.description"
                rows="5"
                placeholder="请输入商品详细描述"
              ></textarea>
            </div>

            <div class="form-actions">
              <button type="button" class="cancel-btn" @click="closeEditModal">
                取消
              </button>
              <button
                type="submit"
                class="submit-btn"
                :disabled="isSubmitting || !isFormValid"
              >
                {{ isSubmitting ? "提交中..." : "提交修改" }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "ProductListWithDateQuery",
  data() {
    return {
      // 商品列表相关
      productList: [],
      searchQuery: "",
      startTime: "",
      endTime: "",
      currentPage: 1,
      pageSize: 10,
      totalItems: 0,
      isLoading: false,
      isDeleting: false,
      timeError: "",

      // 搜索用分类（与修改弹窗分类独立）
      searchCategory1Id: "",
      searchCategory2Id: "",
      searchCategory3Id: "",
      searchLevel1Cats: [],
      searchLevel2Cats: [],
      searchLevel3Cats: [],

      // 修改弹窗相关
      showEditModal: false,
      isSubmitting: false,
      priceError: "",
      picUrl: "",
      selectedFile: null,

      // 修改弹窗用分类
      level1Categories: [],
      level2Categories: [],
      level3Categories: [],

      // 修改表单数据
      currentProduct: {
        id: null,
        productName: "",
        price: 0,
        stock: 0,
        description: "",
        fileName: "",
        categoryLevel1Id: "",
        categoryLevel2Id: "",
        categoryLevel3Id: "",
      },
    };
  },
  computed: {
    //是否显示重置键
    hasSearchCondition() {
      return (
        this.searchQuery ||
        this.startTime ||
        this.endTime ||
        this.searchCategory1Id ||
        this.searchCategory2Id ||
        this.searchCategory3Id
      );
    },
    //总页数 ceil向上取整
    totalPages() {
      return Math.ceil(this.totalItems / this.pageSize);
    },
    //判断是否符合修改条件，，单价合法，一级二级分类，，三级非必须
    isFormValid() {
      return (
        !this.priceError &&
        this.currentProduct.categoryLevel1Id &&
        this.currentProduct.categoryLevel2Id
      );
    },
  },
  created() {
    const type = sessionStorage.getItem("type");
    if (type != 0) {
      this.$router.push("/");
      return;
    }
    this.fetchProductData();
    this.fetchAllLevel1Cats();
  },
  methods: {
    async fetchProductData() {
      this.validateTimeRange();
      // 如果有时间错误，不执行搜索
      if (this.timeError) {
        return;
      }
      this.isLoading = true;
      try {
        const params = {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          productName: this.searchQuery || undefined,
          startTime: this.startTime || undefined,
          endTime: this.endTime || undefined,
          categoryLevel1Id: this.searchCategory1Id || undefined,
          categoryLevel2Id: this.searchCategory2Id || undefined,
          categoryLevel3Id: this.searchCategory3Id || undefined,
        };
        Object.keys(params).forEach((key) => {
          if (params[key] === undefined) delete params[key];
        });

        const response = await axios.get("/api/product/getAllProduct", {
          params,
        });
        this.productList = response.data.pageInfo.list || [];
        this.totalItems = response.data.pageInfo.total || 0;
      } catch (error) {
        console.error("获取商品列表失败:", error);
        this.$message.error(
          `获取商品列表失败: ${error.response?.data?.message || error.message}`
        );
      } finally {
        this.isLoading = false;
      }
    },
    //重置搜索栏，刷新列表
    resetSearch() {
      this.searchQuery = "";
      this.startTime = "";
      this.endTime = "";
      this.searchCategory1Id = "";
      this.searchCategory2Id = "";
      this.searchCategory3Id = "";
      this.searchLevel2Cats = [];
      this.searchLevel3Cats = [];
      this.currentPage = 1;
      this.timeError = "";
      this.fetchProductData();
    },
    async handleDelete(id) {
      if (!confirm(`确定要删除ID为 ${id} 的商品吗？`)) return;

      this.isDeleting = true;
      try {
        await axios.delete(`/api/product/deleteProductById/${id}`);
        this.$message.success("商品删除成功");
        this.fetchProductData();
      } catch (error) {
        console.error("商品删除失败:", error);
        this.$message.error(
          `商品删除失败: ${error.response?.data?.message || error.message}`
        );
      } finally {
        this.isDeleting = false;
      }
    },
    async handleUpdate(id) {
      this.isLoading = true;
      try {
        const response = await axios.get(`/api/product/getProductById/${id}`);
        this.currentProduct = { ...response.data.product };
        console.log(this.currentProduct);
        if (this.currentProduct.categoryLevel1Id) {
          await this.fetchLevel2Categories(
            this.currentProduct.categoryLevel1Id
          );
          if (this.currentProduct.categoryLevel2Id) {
            await this.fetchLevel3Categories(
              this.currentProduct.categoryLevel2Id
            );
          }
        }
        // 当二级分类ID为null时，手动设置为""，确保默认选项显示
        if (this.currentProduct.categoryLevel2Id === null) {
          this.currentProduct.categoryLevel2Id = "";
        }
        // 当三级分类ID为null时，手动设置为""，确保默认选项显示
        if (this.currentProduct.categoryLevel3Id === null) {
          this.currentProduct.categoryLevel3Id = "";
        }
        this.picUrl = "";
        this.selectedFile = null;
        this.priceError = "";
        this.showEditModal = true;
      } catch (error) {
        console.error("获取商品详情失败:", error);
        this.$message.error(
          `获取商品详情失败: ${error.response?.data?.message || error.message}`
        );
      } finally {
        this.isLoading = false;
      }
    },
    async submitEditForm() {
      if (!this.currentProduct.productName.trim()) {
        this.$message.error("商品名称不能为空");
        return;
      }

      if (!this.validatePrice()) return;
      if (!this.validateStock()) return;
      if (!this.validateCategories()) return;

      if (!this.currentProduct.description.trim()) {
        this.$message.error("商品描述不能为空");
        return;
      }

      this.isSubmitting = true;
      try {
        const formData = new FormData();
        formData.append("id", this.currentProduct.id);
        formData.append("productName", this.currentProduct.productName);
        formData.append("price", this.currentProduct.price);
        formData.append("stock", this.currentProduct.stock);
        formData.append("description", this.currentProduct.description);
        formData.append(
          "categoryLevel1Id",
          this.currentProduct.categoryLevel1Id
        );
        formData.append(
          "categoryLevel2Id",
          this.currentProduct.categoryLevel2Id
        );
        formData.append(
          "categoryLevel3Id",
          this.currentProduct.categoryLevel3Id
        );
        if (this.selectedFile) {
          formData.append("file", this.selectedFile);
        }

        await axios.post("/api/product/updateProduct", formData);
        this.$message.success("商品修改成功");
        this.closeEditModal();
        this.fetchProductData();
      } catch (error) {
        console.error("商品修改失败:", error);
        this.$message.error(
          `商品修改失败: ${error.response?.data?.message || error.message}`
        );
      } finally {
        this.isSubmitting = false;
      }
    },
    closeEditModal() {
      this.showEditModal = false;
      this.currentProduct = {
        id: null,
        productName: "",
        price: 0,
        stock: 0,
        description: "",
        fileName: "",
        categoryLevel1Id: "",
        categoryLevel2Id: "",
        categoryLevel3Id: "",
      };
      this.level2Categories = [];
      this.level3Categories = [];
      this.picUrl = "";
      this.selectedFile = null;
      this.priceError = "";
      const fileInput = document.getElementById("edit-file");
      if (fileInput) fileInput.value = "";
    },
    async fetchAllLevel1Cats() {
      try {
        const response = await axios.get("/api/category/getCategoryLevel1Id");
        this.level1Categories = response.data.categoryList;
        this.searchLevel1Cats = response.data.categoryList;
      } catch (error) {
        console.error("获取一级分类失败:", error);
        this.$message.error("获取分类数据失败");
      }
    },
    async fetchLevel2Categories(level1Id) {
      try {
        const response = await axios.get(
          `/api/category/getCategoryParent/${level1Id}`
        );
        this.level2Categories = response.data.categoryList;
      } catch (error) {
        console.error("获取二级分类失败:", error);
        this.$message.error("获取二级分类失败");
      }
    },
    async fetchLevel3Categories(level2Id) {
      try {
        const response = await axios.get(
          `/api/category/getCategoryParent/${level2Id}`
        );
        this.level3Categories = response.data.categoryList;
      } catch (error) {
        console.error("获取三级分类失败:", error);
        this.$message.error("获取三级分类失败");
      }
    },
    async handleSearchLevel1Change() {
      this.searchCategory2Id = "";
      this.searchCategory3Id = "";
      this.searchLevel2Cats = [];
      this.searchLevel3Cats = [];

      if (this.searchCategory1Id) {
        try {
          const response = await axios.get(
            `/api/category/getCategoryParent/${this.searchCategory1Id}`
          );
          this.searchLevel2Cats = response.data.categoryList;
        } catch (error) {
          console.error("获取搜索二级分类失败:", error);
          this.$message.error("获取分类数据失败");
        }
      }
    },
    async handleSearchLevel2Change() {
      this.searchCategory3Id = "";
      this.searchLevel3Cats = [];

      if (this.searchCategory2Id) {
        try {
          const response = await axios.get(
            `/api/category/getCategoryParent/${this.searchCategory2Id}`
          );
          this.searchLevel3Cats = response.data.categoryList;
        } catch (error) {
          console.error("获取搜索三级分类失败:", error);
          this.$message.error("获取分类数据失败");
        }
      }
    },
    handleLevel1Change() {
      this.currentProduct.categoryLevel2Id = "";
      this.currentProduct.categoryLevel3Id = "";
      this.level2Categories = [];
      this.level3Categories = [];

      if (this.currentProduct.categoryLevel1Id) {
        this.fetchLevel2Categories(this.currentProduct.categoryLevel1Id);
      }
    },
    handleLevel2Change() {
      this.currentProduct.categoryLevel3Id = "";
      this.level3Categories = [];

      if (this.currentProduct.categoryLevel2Id) {
        this.fetchLevel3Categories(this.currentProduct.categoryLevel2Id);
      }
    },
    handleFileChange(e) {
      const file = e.target.files[0];
      if (file) {
        this.selectedFile = file;
        this.picUrl = URL.createObjectURL(file);
      }
    },
    //修改单价   验证
    validatePrice() {
      const price = this.currentProduct.price;

      // 检查是否为空
      if (price === null || price === undefined || price === "") {
        this.$message.error("价格不能为空");
        this.currentProduct.price = 1;
        return false;
      }

      // 检查是否为有效数字
      const num = Number(price);
      if (
        isNaN(num) ||
        typeof price === "boolean" ||
        (typeof price === "string" && !/^\d*\.?\d*$/.test(price))
      ) {
        this.$message.error("请输入有效的数字");
        this.currentProduct.price = 1;
        return false;
      }

      // 检查是否为正数
      if (num <= 0) {
        this.$message.error("价格必须大于0");
        this.currentProduct.price = 1;
        return false;
      }

      // 检查小数位数
      const priceStr = String(price);
      if (priceStr.indexOf(".") !== -1 && priceStr.split(".")[1].length > 2) {
        this.$message.error("价格最多只能有两位小数");
        this.currentProduct.price = 1;
        return false;
      }

      return true;
    },
    // 验证库存
    validateStock() {
      const stock = this.currentProduct.stock;

      // 检查是否为空
      if (stock === null || stock === undefined || stock === "") {
        this.$message.error("库存数量不能为空");
        this.currentProduct.stock = 1;
        return false;
      }

      // 检查是否为有效整数
      const num = Number(stock);
      if (
        isNaN(num) ||
        !Number.isInteger(num) ||
        (typeof stock === "string" && !/^\d+$/.test(stock))
      ) {
        this.$message.error("库存必须是整数");
        this.currentProduct.stock = 1;
        return false;
      }

      // 检查是否为正数
      if (num < 0) {
        this.$message.error("库存不能为负数");
        this.currentProduct.stock = 1;
        return false;
      }

      return true;
    },
    // 验证分类
    validateCategories() {
      if (!this.currentProduct.categoryLevel1Id) {
        this.$message.error("请选择一级分类");
        return false;
      }
      return true;
    },
    // 验证时间范围
    validateTimeRange() {
      this.timeError = "";

      if (this.startTime && this.endTime) {
        const start = new Date(this.startTime);
        const end = new Date(this.endTime);
        if (start > end) {
          this.timeError = "开始时间不能晚于结束时间";
        }
      }
    },
    //首页
    goToFirstPage() {
      if (this.currentPage > 1) {
        this.currentPage = 1;
        this.fetchProductData();
      }
    },
    //上一页
    goToPrevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.fetchProductData();
      }
    },
    //下一页
    goToNextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.fetchProductData();
      }
    },
    //尾页
    goToLastPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage = this.totalPages;
        this.fetchProductData();
      }
    },
    //修改PageSize
    handlePageSizeChange() {
      this.currentPage = 1;
      this.fetchProductData();
    },
  },
};
</script>

<style scoped>
.product-management-container {
  padding: 20px;
  font-family: "Microsoft YaHei", sans-serif;
}

.search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  padding: 12px 20px;
  background-color: #f5f5f5;
  border-radius: 4px;
  align-items: center;
  flex-wrap: wrap;
}

.search-bar input,
.category-select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  min-width: 140px;
}

.date-input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  width: 160px;
}

.search-btn,
.reset-btn {
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.search-btn {
  background-color: #1890ff;
  color: white;
}

.reset-btn {
  background-color: #f5f5f5;
  color: #666;
  border: 1px solid #ddd;
}

.loading-state {
  padding: 40px 0;
  text-align: center;
  color: #666;
  font-size: 16px;
}

.product-table-container {
  width: 80%;
  min-width: 900px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.table-header {
  display: flex;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
  font-weight: bold;
  color: #333;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
  transition: background-color 0.2s;
}

.table-row:hover {
  background-color: #f9f9f9;
}

.table-cell {
  padding: 12px 16px;
  line-height: 1.5;
  word-break: break-all;
  display: flex;
  align-items: center;
}

.title-column {
  min-width: 20%;
}

.img-column {
  width: 12%;
  flex-shrink: 0;
  justify-content: center;
}

.stock-column,
.price-column {
  width: 10%;
  flex-shrink: 0;
  color: #666;
  justify-content: center;
}

.category-column {
  width: 20%;
  flex-shrink: 0;
  color: #666;
}

.action-column {
  width: 140px;
  flex-shrink: 0;
  justify-content: center;
  gap: 8px;
}

.product-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #eee;
}

.delete-btn,
.update-btn {
  padding: 6px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.2s;
}

.update-btn {
  background-color: #2f54eb;
  color: white;
}

.update-btn:hover {
  background-color: #1d39c4;
}

.delete-btn {
  background-color: #ff4d4f;
  color: white;
}

.delete-btn:hover {
  background-color: #f5222d;
}

.delete-btn:disabled {
  background-color: #ffccc7;
  cursor: not-allowed;
}

.empty-state {
  padding: 40px 0;
  text-align: center;
  color: #999;
  border-bottom: 1px solid #e0e0e0;
}

.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  gap: 15px;
  padding: 10px;
  flex-wrap: wrap;
}

.page-btn {
  padding: 6px 12px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.page-btn:hover:not(:disabled) {
  background-color: #1890ff;
  color: white;
  border-color: #1890ff;
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  font-size: 14px;
  color: #666;
}

.page-size-select {
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
}

.icon-search::before {
  content: "🔍";
}

.icon-delete::before {
  content: "🗑️";
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.edit-modal {
  background-color: white;
  border-radius: 8px;
  width: 650px;
  max-width: 90%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-header {
  padding: 16px 24px;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.85);
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.45);
}

.close-btn:hover {
  color: rgba(0, 0, 0, 0.75);
}

.modal-body {
  padding: 24px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.form-group input,
.form-group textarea,
.category-selectors select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.category-group {
  margin-bottom: 16px;
}

.category-selectors {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.category-selectors select:disabled {
  background-color: #f5f5f5;
  color: #999;
}

.img-upload-container {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 8px;
}

.img-preview {
  width: 100px;
  height: 100px;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.no-img-placeholder {
  color: #999;
  font-size: 12px;
  text-align: center;
  padding: 0 8px;
}

.upload-control {
  flex: 1;
}

.upload-btn {
  display: inline-block;
  padding: 8px 16px;
  background-color: #f5f5f5;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
}

.upload-btn:hover {
  background-color: #e8e8e8;
}

.tip {
  font-size: 12px;
  color: #999;
  margin: 0;
}

.required {
  color: #ff4d4f;
  font-size: 14px;
  margin-left: 2px;
}

.error-message {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #ff4d4f;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

.cancel-btn {
  padding: 8px 16px;
  background-color: #f5f5f5;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
}

.cancel-btn:hover {
  background-color: #e8e8e8;
}

.submit-btn {
  padding: 8px 16px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.submit-btn:hover {
  background-color: #40a9ff;
}

.submit-btn:disabled {
  background-color: #bae7ff;
  cursor: not-allowed;
}

.time-error {
  color: #ff4d4f;
  font-size: 12px;
  margin-left: 10px;
  white-space: nowrap;
}
</style>